<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="favicon.ico" rel="shortcut icon">
    <title>vue组件开发-组件的数据和事件</title>
</head>

<body>
    <div id="app">
        {{msg}}
        <input type="text" v-model="name" />
        <input type="text" v-model="age" />
        <!-- @dw   @edit-name  向子组件中传递事件 定义的事件名如果要驼峰命名的话 用-连接符  -->
        <!-- 子组件中调用过来的相关事件必须使用this.$emit('dw')调用、this.$emit('edit-name')调用-->
        <main-componet :name="name" :age="age" @dw="aa" @edit-name="changeName"></main-componet>
    </div>
    <template id="mainComponet">
        <div>
            <h1>欢迎:{{name}} 年龄:{{age}} ,进入云尚台球厅</h1>
            <ul>
                <!-- <li>SSM框架基础</li>
                <li>采购管理项目实战</li>
                <li>前端-Vue框架基础</li>
                <li>SpringBoot后台框架</li> -->
                <li v-for="(book,index) in books" ::key="book.bookId">
                    {{book.bookName}}
                </li>
            </ul>
            <button @click="dz">点赞</button>
            <button @click="change">点我</button>
            <button @click="changeName">点我切换张三</button>
        </div>
    </template>
</body>

</html>
<script type="module">
    import { } from './js/vue.js';
    //展示组件
    // let mainComponet = {
    //     template: "<div><h1>欢迎:{{name}}  年龄:{{age}} ,进入云尚台球厅</h1></div>",
    //     props: ['name', 'age'], //props作用  用来接受使用组件时通过组件标签传递的数据
    // }

    let mainComponet = {
        template: "#mainComponet",
        props: ['name', 'age'],
        data() {
            //存放组件数据
            return {
                books: [],
            };
        },
        methods: {
            //组件内部自定义方法
            dz() {
                alert(this.name + " 点赞了");
            },
            change() {
                this.$emit("dw", "传递的数据");//调用组件传递过来的其他函数时需要使用this.$emit('函数名调用的参数')
            },
            changeName() {
                this.$emit("edit-name", "传递的数据");
            }
        },
        created() {
            console.log("展示组件初始化完成");
            this.books = [
                { bookId: 1, bookName: 'SSM框架基础' },
                { bookId: 2, bookName: '采购管理项目实战' },
                { bookId: 3, bookName: '前端-Vue框架基础' },
                { bookId: 4, bookName: 'SpringBoot后台框架' },
                { bookId: 5, bookName: '前后端分离项目实战' },]
        },
    };

    new Vue({
        el: '#app',
        data: {
            msg: 'hello world',
            name: "土鸡",
            age: "21",
        },
        methods: {
            aa() {
                alert("父组件传递的方法被调用了");
            },
            changeName() {
                alert("切换名字");
                this.name = "张三";
            }
        },
        components: {
            mainComponet,
        },
        props: {

        }
    })
</script>